<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input  style="width: 200px;"   v-model="query.car_no" placeholder="车牌号" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.brand" placeholder="品牌" class="filter-item"  ></el-input>

      <el-select v-model="query.status" placeholder="车辆状态" class="filter-item" >
        <el-option :label="'全部'" :value="0" ></el-option>
        <el-option :label="'空闲'" :value="1" ></el-option>
        <el-option :label="'外租中'" :value="3" ></el-option>
        <el-option :label="'维修中'" :value="4" ></el-option>
      </el-select>

      <el-date-picker placeholder="车险到期时间" class="filter-item"
        v-model="query.insurance_date" value-format="yyyy-MM-dd"
        type="date">
      </el-date-picker>

      <el-button style="margin-left: 10px" @click="queryRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="reload" type="danger" class="filter-item">刷新</el-button>
      <el-button @click="openAddDialog" type="primary" class="filter-item">添加车辆</el-button>
<!--      <el-upload  class="filter-item"
        style="margin-left: 10px"
        :action="host+'/guard/importFile?importType=flight'"
        accept=".xls,.xlsx"
        :on-success="handleUploadSuccess"
        :show-file-list="false">
        <el-button type="primary">导入</el-button>
      </el-upload>
      <el-button style="margin-left: 10px" @click="download" type="primary" class="filter-item">导出</el-button>-->

      <!--      <el-button @click="handleDelete(undefined,undefined)" type="primary" class="filter-item">批量删除</el-button>-->
<!--      <el-button @click="handleStatus(undefined,undefined,2)" type="primary" class="filter-item">批量下架</el-button>-->
<!--      <el-button @click="handleTop(undefined,undefined,1)" type="primary" class="filter-item">批量置顶</el-button>-->
    </div>

      <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-horizontal-scroll="'always'"
      @selection-change="handleSelectionChange"
    >
<!--    <el-table-column type="selection" min-width="55" />-->
    <el-table-column prop="id" label="ID" min-width="50" />
    <el-table-column prop="car_no" label="车牌号" min-width="100" />
    <el-table-column prop="brand" label="汽车品牌" min-width="100" />
    <el-table-column prop="rent_unit_name" label="外租单位" min-width="180" />
    <el-table-column prop="insurance_date" label="车险到期时间" min-width="120" />
    <el-table-column prop="status_name" label="状态" min-width="100" >
      <template slot-scope="scope">
        <span v-if="scope.row.status==1" :style="{'color':'green'}">{{scope.row.status_name}}</span>
        <span v-if="scope.row.status==2" :style="{'color':'#8c939d'}">{{scope.row.status_name}}</span>
        <span v-if="scope.row.status==3" :style="{'color':'orange'}">{{scope.row.status_name}}</span>
        <span v-if="scope.row.status==4" :style="{'color':'#1c6ca1'}">{{scope.row.status_name}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="beizhu" label="备注" min-width="160" />
    <el-table-column prop="created_at" label="创建时间" min-width="150" />
    <el-table-column fixed="right" label="操作" min-width="200">
      <template slot-scope="scope">
        <el-dropdown style="margin-left: 10px"  @command="handleCommandStatus">
          <el-button size="mini" type="text">
            状态<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{status:'1',id:scope.row.id}">空闲</el-dropdown-item>
            <el-dropdown-item :command="{status:'3',id:scope.row.id}">外租中</el-dropdown-item>
            <el-dropdown-item :command="{status:'4',id:scope.row.id}">维修中</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button  v-if="scope.row.status==1" size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog :title="isAdd?'添加车辆':'编辑车辆'" v-loading="loading" :visible.sync="dialogFormVisible">
      <el-form  ref="form" :model="form" label-width="120px">

        <el-form-item label="车牌号：">
          <el-input v-model="form.car_no"></el-input>
        </el-form-item>
        <el-form-item label="品牌：">
          <el-input v-model="form.brand"></el-input>
        </el-form-item>
        <el-form-item label="车险到期时间：">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.insurance_date" style="width: 100%" value-format="yyyy-MM-dd" ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" rows="5" v-model="form.beizhu"></el-input>
        </el-form-item>

        <el-form-item v-if="isAdd">
          <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        </el-form-item>
        <el-form-item v-else>
          <el-button type="primary" @click="onSubmit('form')">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>



</template>

<script>

import { myGet, myPost } from '@/utils/myUtils'

const urlAdvertLst = '/guard/carinfo/lst'
const urlAdvertAdd = '/guard/carinfo/add'
const urlAdvertDel = '/guard/carinfo/del'
const urlAdvertChange = '/guard/carinfo/change'
const urlAdvertDetail = '/guard/carinfo/detail'
export default {

    data() {
      return {
        selectId:[],
        loading:false,
        host:process.env.VUE_APP_HOST,
        list:[],
        ext:"",
        isShowCover:false,
        isAdd:true,
        dialogFormVisible:false,
        listLoading:false,

        //dialogImageUrl: '',
        //dialogVisible: false,
        objClass: {
          upLoadShow: true,
          upLoadHide: false,
        },
        query:{
          car_no:'',
          brand:'',
          seat_num:'',
          is_auto:0,
          type:0,
          status:0,
          insurance_date:'',
        },
        pagination:{
          page:1,
          pageSize:20,
          total:0,
        },

        fileList:[],
        unitList:[],
        form:{
          id:0,
          car_no:'鲁Q',
          brand:'',
          insurance_date:'',
          beizhu:''
        },

        upload:{
          module:'advert',
        }
      }
    },
    methods: {

      handleCommandStatus(command){
        let tip = '确定修改车辆状态'
        this.$confirm(tip, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          myGet(urlAdvertChange,command).then(res=>{
            if(res.status){
              this.$message.success(res.msg)
              this.getRecords();
            }
          })
        }).catch(() => {
          //取消
        });
      },

      download(){
        const url = this.host+urlDownloadUser+"?downloadType=flight&fullName="+this.query.fullName+"&code="+this.query.code
        exportXls(url);
      },

      reload(){
        Object.assign(this.$data.query,this.$options.data().query)
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },

      queryRecords(){
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },

      getRecords(){
        this.listLoading = true
        const params = Object.assign(this.query,this.pagination)
        myGet(urlAdvertLst,params).then(res=>{
          this.listLoading = false
          if(res.status){
            this.list = res.data.records
            this.pagination.total = res.data.total
          }
        })
      },

      openAddDialog(){
        this.isAdd = true
        this.dialogFormVisible= true
        Object.assign(this.$data.form,this.$options.data().form)
      },
      closeAddDialog(){
        this.isAdd = false
        Object.assign(this.$data.form,this.$options.data().form)
        this.dialogFormVisible= false
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              myPost(urlAdvertAdd,this.form).then(res=>{
                if(res.status){
                  this.dialogFormVisible = false;
                  this.$message.success(res.msg);
                  this.getRecords()
                }
              })
          }
        });
      },

      handleSelectionChange(val) {
        this.selectId = [];
        val.forEach(item=>{
          this.selectId.push(item.id)
        })
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.pagination.page = 1
        this.getRecords()
      },
      handleCurrentChange(val) {
        this.pagination.page  = val
        this.getRecords();
      },

      handleEdit(index,row){
        this.isAdd = false
        let id = row.id

        myGet(urlAdvertDetail,{id}).then(res=>{
          if(res.status){
            let advert = res.data.records;
            this.form.id = advert.id
            this.form.car_no = advert.car_no
            this.form.brand = advert.brand
            this.form.insurance_date = advert.insurance_date
            this.form.beizhu = advert.beizhu
            this.dialogFormVisible = true
          }
        })
      },

      handleDelete(index,row){

        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = [];
          if(typeof(row) == "undefined" ){
            id = this.selectId
          }else{
            id = [row.id]
          }
          myGet(urlAdvertDel,{id}).then(res=>{
            if(res.status){
              this.$message.success(res.msg)
              this.getRecords()
            }
          })
        });
      },


    },

    mounted() {
      this.getRecords()
    },
}
</script>

<style>

.upLoadShow .el-upload {
  width: 10rem !important;
  height: 10rem !important;
  line-height: 10rem !important;
}

/*当upLoadHide为true时，启用如下样式，即缩略图的样式，若为false则不启用该样式*/
.upLoadHide .el-upload-list--picture-card .el-upload-list__item {
  width: 10rem !important;
  height: 10rem !important;
  line-height: 10rem !important;
}
/*当upLoadHide为true时，启用如下样式，即上传框的样式，若为false则不启用该样式*/
.upLoadHide .el-upload {
  display: none;
}


.table-img{
    width: 50px;
    height: 50px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
